<template>
	<view class="wrap">
		<scroll-view class="left" scroll-y :show-scrollbar="false">
			<view :class="['left-item', c.id===selectedId?'active':'']" v-for="c in categories" :key="c.id" @click="pick(c)">{{c.name}}</view>
		</scroll-view>
		<scroll-view class="right" scroll-y :show-scrollbar="false">
			<view class="p-item" v-for="p in products" :key="p.id" @click="goDetail(p.id)">
				<image class="thumb" :src="getImageUrl(p.coverImage)" mode="aspectFill" />
				<view class="meta">
					<text class="title">{{p.title}}</text>
					<text class="price">¥{{p.price}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { api } from '../../utils/request.js'
import { BASE_URL } from '../../utils/server.js'

export default {
	data(){return{categories:[],selectedId:null,products:[]}},
	onLoad(){this.load();},
	methods:{
		async load(){
			const c = await api.getCategories();
			if(c.code===0){ this.categories=c.data; this.selectedId=c.data?.[0]?.id||null; }
			this.loadProducts();
		},
		async loadProducts(){
			const res = await api.getProducts({ categoryId:this.selectedId, pageNum:1, pageSize:50 });
			if(res.code===0) this.products = res.data.records||[];
		},
		pick(c){ this.selectedId=c.id; this.loadProducts(); },
		goDetail(id){ uni.navigateTo({url:`/pages/product/detail?id=${id}`}); },
		getImageUrl(url) {
			if (!url) return '/static/logo.png';
			if (url.startsWith('http')) return url;
			return BASE_URL + url;
		}
	}
}
</script>

<style>
.wrap{ display:flex; height:100vh; }
.left{ width: 220rpx; background:#f7f7f7; }
.right{ flex:1; padding: 20rpx; }
.left-item{ padding: 24rpx; border-bottom: 1rpx solid #eee; }
.left-item.active{ background:#fff; font-weight:600; }
.p-item{ display:flex; gap: 20rpx; background:#fff; border-radius: 12rpx; padding: 16rpx; margin-bottom: 16rpx; }
.thumb{ width: 160rpx; height: 160rpx; background:#fafafa; border-radius: 8rpx; }
.meta{ display:flex; flex-direction:column; justify-content:center; }
.title{ font-size: 28rpx; }
.price{ color:#e64340; margin-top: 8rpx; }
</style>

